<template>
  <div class="comment-area">
    <el-card style="text-align: left;height:auto;width: 990px;margin: 35px auto 0 auto">
      <div v-for="comment in comments" :key="comment.id">
        <div style="float:left;width:75%;height: auto;">
          <span style="font-size: 18px">{{comment.content}}</span>
          <el-divider></el-divider>
        </div>
      </div>
    </el-card>

        <el-card class="box-card" style="margin:20px auto; height:180px; width:600px ;padding: 0px 0px 0px 0px">
          <el-form ref="form" :model="form"  label-width="70px" style="margin: 30px 0 ; padding: 0px 0px" size="default">
            <el-form-item label="编辑内容">
              <el-input type="textarea" v-model="form.content" ></el-input>
            </el-form-item>
            <el-form-item>
              <div style="margin: 0px 0 0 0; text-align:center" >
                <el-button type="primary" size="default" @click="onSubmit">回复</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-card>

  </div>
</template>

<script>
import comment from "./Comment.vue";

export default {
  name: "Comment",
  components: {Comment},
  data () {
    return {
      comments:[
          {
            id:1,
            content:"你也是",
          },
          {
            id:2,
            content:"我也是",
          },
      ],
      form: {
        content:""
      },
    }
  },
  /*mounted () {
    this.loadArticle()
  },*/
  methods: {
    comment() {
      return comment
    },
    loadArticle () {
      /*var _this = this
      this.$axios.get('/post/Comment' + this.$route.query.id).then(resp => {
        if (resp && resp.data.code === 200) {
          _this.comment = resp.data.result
        }
      })*/

    },
    onSubmit() {
      this.form.user = this.user.username
      this.rq.post("/post/Comment", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("回复成功")
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error("未知错误")
      })
    }
  }
}
</script>

<style scoped>
.comment-area {
  width: 900px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
</style>
